<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生标签页</title>
	<style>
		button {
			margin: 20px;
		}
	</style>
</head>
<body>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">

<button type="button" class="el-button el-button--primary is-plain" onclick="tabsUI.init()">
	<span>标签页初始化</span>
</button>

<select name="" id="select">
	<option value="tab-1">tab-1</option>
	<option value="tab-2">tab-2</option>
	<option value="tab-3">tab-3</option>
	<option value="tab-20">tab-20</option>
	<option value="tab-21">tab-21</option>
	<option value="tab-22">tab-22</option>
	<option value="tab-23">tab-23</option>
</select>
<button class="el-button el-button--primary is-plain" onclick="tabsUI.getTargetById(document.getElementById('select').value)">根据ID获取焦点</button>

	<div style="margin: 30px"></div>
<br>

<button data-position='left' onclick="tabsUI.TooglePosition('left')" class="el-button el-button--success is-plain">左侧菜单</button> &nbsp;
<button data-position='right' onclick="tabsUI.TooglePosition('right')" class="el-button el-button--success is-plain">右侧菜单</button> &nbsp;
<button data-position='top' onclick="tabsUI.TooglePosition('top')" class="el-button el-button--success is-plain">上方菜单</button> &nbsp;
<button disabled="disabled" data-position='bottom' onclick="tabsUI.TooglePosition('bottom')" class="el-button el-button--success is-plain">底部菜单</button> &nbsp;
<br>



<button data-position=''>统一滚动切换</button>
<button>统一滑动鼠标切换</button>

<!--
-->
<div id="Tabs" rel="tabs" style="position: absolute; top: 220px; left: 100px;">
	<div class="el-tabs el-tabs--top el-tabs--border-card">
		<div class="el-tabs__header is-top">
			<!-- is-scrollable 滚动添加class-->
			<div class="el-tabs__nav-wrap is-top is-scrollable">
				<!-- 滚动添加span -->
				<span class="el-tabs__nav-prev"><i class="el-icon-arrow-left"></i></span>
				<span class="el-tabs__nav-next is-disabled"><i class="el-icon-arrow-right"></i></span>
				<div class="el-tabs__nav-scroll">
					<div role="tablist" class="el-tabs__nav" style="transform: translateX(0px);">
						<div id="tab-0" aria-controls="pane-0" role="tab" tabindex="0"
						     class="el-tabs__item is-top is-active"
						     aria-selected="true">用户管理用户管理用户管理用户管理用户管理用户管理
						</div>
						<div id="tab-1" aria-controls="pane-1" role="tab" tabindex="-1"
						     class="el-tabs__item is-top is-closable">配置管理
						</div>
						<div id="tab-2" aria-controls="pane-2" role="tab" tabindex="-1"
						     class="el-tabs__item is-top is-closable">角色管理
						</div>
						<div id="tab-3" aria-controls="pane-3" role="tab" tabindex="-1"
						     class="el-tabs__item is-top is-closable">
							定时任务补偿
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 标签页面板 start-->
		<div class="el-tabs__content">
			<div role="tabpanel" id="pane-0" aria-labelledby="tab-0" class="el-tab-pane is-active">
				用户管理
			</div>
			<div role="tabpanel" id="pane-1" aria-labelledby="tab-1" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">配置管理
			</div>
			<div role="tabpanel" id="pane-2" aria-labelledby="tab-2" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">角色管理
			</div>
			<div role="tabpanel" id="pane-3" aria-labelledby="tab-3" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">
				定时任务补偿<br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
			</div>
		</div>
		<!-- 标签页面板 end -->
	</div>
</div>


<div id="Tabs2" rel="tabs" style="position: absolute; width: 600px; height: 400px; top: 690px; left: 100px;">
	<!--todo overflow 的时候 不是很好看 -->
	<div class="el-tabs el-tabs--top el-tabs--border-card" style="width: 100%;height: 100%;overflow: auto">
		<div class="el-tabs__header is-top">
			<!-- 没有滚动 -->
			<div class="el-tabs__nav-wrap is-top">
				<!-- 滚动添加span -->
				<!-- span -->
				<!-- span -->
				<div role="tablist" class="el-tabs__nav" style="transform: translateX(0px);">
					<div id="tab-20" aria-controls="pane-0" role="tab" tabindex="0"
					     class="el-tabs__item is-top is-active"
					     aria-selected="true">用户管理
					</div>
					<div id="tab-21" aria-controls="pane-1" role="tab" tabindex="-1"
					     class="el-tabs__item is-top">配置管理
					</div>
					<div id="tab-22" aria-controls="pane-2" role="tab" tabindex="-1" class="el-tabs__item is-top">角色管理
					</div>
					<div id="tab-23" aria-controls="pane-3" role="tab" tabindex="-1" class="el-tabs__item is-top">
						定时任务补偿
					</div>
				</div>
			</div>
		</div>
		<!-- 标签页面板 start-->
		<div class="el-tabs__content" style="overflow: auto;padding: 0px">
			<div role="tabpanel" id="pane-20" aria-labelledby="tab-0" class="el-tab-pane is-active">
				用户管理
			</div>
			<div role="tabpanel" id="pane-21" aria-labelledby="tab-1" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">配置管理
			</div>
			<div role="tabpanel" id="pane-22" aria-labelledby="tab-2" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">角色管理
			</div>
			<div role="tabpanel" id="pane-23" aria-labelledby="tab-3" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">
				定时任务补偿<br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
			</div>
		</div>
		<!-- 标签页面板 end -->
	</div>

</div>


<div id="Tabs3" rel="tabs" style="position: absolute; width: 600px; height: 400px; top: 1190px; left: 100px;">

	<div class="el-tabs el-tabs--right el-tabs--border-card">

		<div class="el-tabs__header is-top is-right">
			<div class="el-tabs__nav-wrap is-top is-right">
				<div role="tablist" class="el-tabs__nav" style="transform: translateY(0px);">
					<div id="tab-30" aria-controls="pane-0" role="tab" tabindex="0"
					     class="el-tabs__item is-right is-active"
					     aria-selected="true">用户管理
					</div>
					<div id="tab-31" aria-controls="pane-1" role="tab" tabindex="-1"
					     class="el-tabs__item is-right">配置管理
					</div>
					<div id="tab-32" aria-controls="pane-2" role="tab" tabindex="-1" class="el-tabs__item is-right">
						角色管理
					</div>
					<div id="tab-33" aria-controls="pane-3" role="tab" tabindex="-1" class="el-tabs__item is-right">
						定时任务补偿
					</div>
				</div>
			</div>
		</div>
		<!-- 标签页面板 start-->
		<div class="el-tabs__content">
			<div role="tabpanel" id="pane-30" aria-labelledby="tab-0" class="el-tab-pane is-active">
				用户管理
			</div>
			<div role="tabpanel" id="pane-31" aria-labelledby="tab-1" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">配置管理
			</div>
			<div role="tabpanel" id="pane-32" aria-labelledby="tab-2" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">角色管理
			</div>
			<div role="tabpanel" id="pane-33" aria-labelledby="tab-3" class="el-tab-pane" style="display: none;"
			     aria-hidden="true">
				定时任务补偿<br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
				<h1>定时任务补偿</h1><br>
			</div>
		</div>
		<!-- 标签页面板 end -->
	</div>

</div>


<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
</body>
</html>